import { Component } from "react";
import DemoState from "./01定义状态"
import DemoEventFn from "./02事件处理-更改this指向"
import DemoForm from "./03受控与非受控组件"


class Demo extends Component{
    constructor(){
        super()
        this.state={
            like:'游戏',
            count:0
        }
    }
    // add(){
    //     this.setState({
    //         count:this.state.count+5
    //     })
    // }
    add=(num)=>{
        this.setState({
            count:this.state.count+num
        })
    }
    getId = (e) => {
        console.log('e', e.target.dataset.id)
    }
    render(){
        return(<>
            <h2>案例（知识点）</h2>
            <DemoState />
            <DemoEventFn />    
            <DemoForm />    
            count: {this.state.count}
            {/* <button onClick={this.add.bind(this, 5)}>点击count++</button> */}
            <button onClick={this.add.bind(this)}>使用bind count++</button>
            {/* 箭头函数加加 */}
            <button onClick={()=>this.add(10)}>加10</button>
            <button data-id='100' onMouseLeave={(e)=> this.getId(e)}>点击跳转详情</button>


        </>
        )
    }
}

export default Demo